import {Button, Card, Space, Tag, Typography} from "@douyinfe/semi-ui";
import {CSSProperties, useEffect, useState,} from "react";
import {IconEmoji, IconRefresh, IconAlertTriangle} from "@douyinfe/semi-icons";
import {
    getLevelColor,
    getNowPredictKey,
    getPredictByKey,
    Predict, PredictTag,
    RiskLevel
} from "../../api/storage/ApiPredict.ts";
import {
    addMessageToConversation,
    addNewConversation,
    getDefaultNewConversationName,
    setNowConversationKey,
    UserType
} from "../../api/storage/ApiConversation.ts";
import {KEY_REQUEST_MSG} from "../ai/components/Conversation.tsx";


const PredictResult = (props: { show: boolean, changeToAIPageCall: () => void }) => {
    const {Title} = Typography;
    const commonStyle: CSSProperties = {
        margin: '8px 0', width: "100%", textAlign: "center", color: "white"
    }
    const [predict, setPredict] = useState<Predict>({
        key: "",
        condition: false,
        percent: 25,
        riskLevel: RiskLevel.lowest,
        time: "",
        prompt: "",
        tags: []
    })
    useEffect(() => {
        const p = getPredictByKey(getNowPredictKey())
        if (p) {
            setPredict(p)
        }
    }, [props.show]);

    const aiConversationHelper = () => {
        const key = addNewConversation(getDefaultNewConversationName())
        setNowConversationKey(key)
        addMessageToConversation({role: UserType.System, content: predict.prompt})
        localStorage.setItem(KEY_REQUEST_MSG,"分析我的情况，给我一些建议")
        props.changeToAIPageCall()
    }
    const refresh = () => {
        window.location.reload()
    }
    return (
        <div style={{flexGrow: 1, margin: 20}}>
            <Card bordered={true} headerLine={true}>
                <Card bordered={true} headerLine={true} style={{background: getLevelColor(predict.riskLevel)}}>
                    <Title heading={2} style={commonStyle}>您的阿尔兹海默症风险为</Title>
                    <Title heading={1}
                           style={{
                               margin: '24px 0',
                               width: "100%",
                               textAlign: "center",
                               color: "white"
                           }}>{predict.percent + "%"}</Title>
                    <Title heading={3} style={commonStyle}>{predict.riskLevel}</Title>
                </Card>
                <Space style={{marginTop: 20}}>
                    <Button icon={<IconRefresh/>} onClick={refresh}>重新预测</Button>
                    <Button icon={<IconEmoji/>} theme="solid" onClick={aiConversationHelper}>寻求AI帮助</Button>
                </Space>
                {predict.condition ? (
                    <div style={{marginTop:10,padding:10, display: "flex", alignItems: "center", flexDirection: "row"}}>
                        <IconAlertTriangle style={{fontSize:24}}/>
                        <div style={{marginLeft:10}}>温馨提示：发现您有以下需要关注的风险，建议您寻求医师以获得进一步的帮助</div>
                    </div>
                ) : (<></>)}
                <div style={{marginTop: 10}}>
                    {predict.tags.map((tag: PredictTag) => (
                        <div style={{marginTop: 5, display: "flex", alignItems: "center", flexDirection: "row"}}>
                            <Tag key={tag.key} color={"yellow"}>{tag.key}</Tag>
                            <div style={{marginLeft: 5, lineHeight: 1.5, fontSize: 12}}>
                                {tag.content}
                            </div>
                        </div>
                    ))}
                </div>
            </Card>
        </div>
    )
}
export default PredictResult;